<template>
<div class="showing-up">
    <ul @touchmove="moveflag=true">
        <li class="item" v-for="item in $store.state.movieList.showingUpList" 
			:key="item.filmId" @touchend="handleEnterMovieDetail(item.filmId)">
            <div class="item-img">
                <img :src="item.poster">
            </div>
            <div class="item-info">
                <h3 class="title">{{item.name}}</h3>
                <p class="grade">观众评分:
                    <span style="color: #ffb539;">{{item.grade}}</span>
                </p>
                <p class="actor">主演:
                    <span v-if="!item.actors">暂无主演</span>
                    <span v-else v-for="(val, i) in item.actors" :key="i">
                        {{val.name}}
                    </span>
                </p>
                <p class="run-time">{{item.nation}} | {{item.runtime}}分钟</p>
            </div>
        </li>
    </ul>
        <p style="padding:15px 0;text-align:center;" @click="handleLoadMore">加载更多</p>
</div>
</template>

<script>
export default {
	name: "showingup",
	data() {
		return {
            moveflag: false,
            pageNum: 1
		}
    },
	mounted() {
        this.getShowingUpMovieList()
        window.scroll = this.getShowingUpScroll
    },
	methods: {
        getShowingUpScroll() {
            console.log("getShowingUpScroll")
        },

        handleLoadMore() {
            this.pageNum++
            this.$store.dispatch("movieList/getShowingUpList", {
                pageNum: this.pageNum
            })
        },

		// 获取影片
		getShowingUpMovieList() {
            // console.log(this.$store)
            if(this.$store.state.movieList.showingUpList.length === 0) {
                this.$store.dispatch("movieList/getShowingUpList", {
                    pageNum: this.pageNum
                })
            } else {
                console.log("showingUp - 使用缓存数据");
            }
        },
        // 进入影片详情页
		handleEnterMovieDetail(movieId) {
			if(this.moveflag) {
				this.moveflag = false
				return;
            }
			// console.log(this.moveflag)
            this.$router.push("filmDetail/showing/" + movieId)
		}
	}
}	
</script>

<style scoped>
.showing-up {
    flex: 1;
	background-color: #d2e2ca;
}
.showing-up ul {
    overflow: hidden;
	margin: 0 12px;
}
.showing-up ul li {
	position: relative;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	width: 100%;
	height: 94px;
	padding: 15px 15px 15px 0;
	border-top: 1px solid red;
}
.showing-up ul li:first-of-type {
	border-top: 0;
}
.showing-up .item-img{
	position: absolute;
	display: flex;
	align-items: center;
	width: 66px;
	height: 94px;
	background: rgb(210, 226, 202);
}
.showing-up .item-img>img {
	width: 100%;
}
/* calc(100% - 10px) 函数用于动态计算长度值  + - * / */
.showing-up .item-info{
	position: absolute;
	left: 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
	width: calc(100% - 120px);
	padding: 0 20px;
}
.showing-up .item-info .title,
.showing-up .item-info .grade,
.showing-up .item-info .actor,
.showing-up .item-info .run-time {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	color: #686a6c;
}
.showing-up .item-info .title{
	font-size: 18px;
	color: #191a1b;
}
</style>